<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./lib/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px; height: 400px"></div>
        <script>
            // 1. 引入 echarts
            // 2. 创建一个容器div
            // 3. 初始化 echarts 并选择容器
            // 4. 设置配置项 option
            // 5. 使用 setOption 方法，设置数据

            // grid 选项 表示直角坐标系绘制区域
            //  show ：是否显示网格
            //  left，right，top，bottom 距离容器上下左右的距离
            //  containLabel 区域是否包含坐标轴的刻度标签
            //  backgroundColor 背景颜色

            // title 选项，显示图表的标题
            // show：是否显示
            // text：标题内容
            // left：标题横向位置
            // top: 标题纵向位置
            // textStyle 标题文本样式

            // legend 图例组件
            // show:是否显示图例
            // data:图例的内容
            // left , top
            // orient 方向 默认水平 vertical 表示垂直
            // textStyle 文本样式
            const myChart = echarts.init(document.querySelector("#main"));
            const option = {
                // 标题
                title: {
                    text: "销量",
                    left: "center",
                    top: "top",
                    textStyle: {
                        color: "red",
                        fontSize: 30,
                        fontWeight: "bold",
                    },
                },
                // 图例
                legend: {
                    // 已什么数据为图例
                    // data: ["销量"],
                    orient: "vertical",
                    top: "top",
                    left: "left",
                    textStyle: {
                        color: "red",
                        fontSize: 16,
                    },
                },
                grid: {
                    show: false,
                    left: 0,
                    bottom: 0,
                    containLabel: true,
                    backgroundColor: "rgba(0, 255, 0, 0.1)",
                },
                // x轴和y轴
                /*
                    1. show: 是否显示，默认为true
                    2. type：坐标轴类型
                        1. value 数值轴 适用于连续的数据 （ 1 到 40）
                        2. category 类目轴, 适用于离散的类目数据 (裤子 衬衫 袜子)。
                           类目轴的数据来源可以是：xAxis.data, series.data,或者是dataset.source
                    3.axisLine：坐标轴线相关设置
                    4.axisTick: 坐标轴刻度相关设置
                    5.axisLabel：坐标轴刻度标签
                    6.splitLine: 坐标轴的分割线
                    7.name 轴名称
                */
                xAxis: {
                    show: false,
                    // 坐标轴数据类型
                    type: "category",
                    name: "销售种类",
                    nameTextStyle: {
                        color: "lightblue",
                    },

                    // 坐标轴数据
                    data: [
                        "衬衫",
                        "羊毛衫",
                        "雪纺衫",
                        "裤子",
                        "高跟鞋",
                        "袜子",
                    ],
                    // 坐标轴线
                    axisLine: {
                        show: true,
                        // 线的样式
                        lineStyle: {
                            color: "red",
                            width: 3,
                        },
                    },
                    // 坐标轴刻度
                    axisTick: {
                        show: true,
                        length: 10,
                        lineStyle: {
                            color: "orange",
                            width: 1,
                        },
                    },
                    // 坐标轴刻度标签
                    axisLabel: {
                        show: true,
                        color: "green",
                        fontSize: 18,
                    },
                    // 坐标轴的分割线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "purple",
                            width: 2,
                        },
                    },
                },
                // y轴
                yAxis: {
                    show: false,
                    type: "value",
                    axisTick: {
                        show: true,
                        length: 10,
                        lineStyle: {
                            color: "blue",
                            width: 1,
                        },
                    },
                    axisLine: {
                        show: true,
                        // 线的样式
                        lineStyle: {
                            color: "gold",
                            width: 3,
                        },
                    },
                    axisLabel: {
                        show: true,
                        color: "green",
                        fontSize: 18,
                    },
                    axisTick: {
                        show: true,
                        alignWithLabel: false,
                        length: 10,
                    },
                },
                // 数据，一般情况下是和x轴对应的
                // series 组件用于直角坐标系系列，可以包含多个系列，通过该组件，可以配置样式和行为
                /*
                    1. data : 系列中，数据内容的数组。 每个元素可以是单个数值（y）也可以是包含x y 的数组。
                    2. type: 表示类型 可选值 line bar pie scatte
                    3. itemStyle: 图形样式
                    4. lable: 文本标签样式
                    5. emphasis：高亮样式
                */
                series: [
                    /* {
                        type: "line",
                        data: [5, 20, 36, 10, 10, 20],
                    }, */
                    // {
                    //     type: "bar",
                    //     itemStyle: {
                    //         color: "red",
                    //         borderColor: "blue",
                    //         borderWidth: 2,
                    //         barBorderRadius: 5,
                    //     },
                    //     emphasis: {
                    //         itemStyle: {
                    //             color: "blue",
                    //             borderColor: "red",
                    //             borderWidth: 1,
                    //         },
                    //     },
                    //     data: [
                    //         {
                    //             value: [0, 5],
                    //             name: "衬衫",
                    //             itemStyle: {
                    //                 color: "orange",
                    //                 borderColor: "black",
                    //                 borderWidth: 2,
                    //                 barBorderRadius: 5,
                    //             },
                    //             emphasis: {
                    //                 itemStyle: {
                    //                     color: "red",
                    //                     borderColor: "green",
                    //                     borderWidth: 1,
                    //                 },
                    //             },
                    //         },
                    //         {
                    //             value: [1, 20],
                    //             name: "羊毛衫",
                    //         },
                    //         {
                    //             value: [2, 36],
                    //             name: "雪纺衫",
                    //         },
                    //         {
                    //             value: [3, 10],
                    //             name: "裤子",
                    //         },
                    //         {
                    //             value: [4, 10],
                    //             name: "高跟鞋",
                    //         },
                    //         {
                    //             value: [5, 20],
                    //             name: "袜子",
                    //         },
                    //     ],
                    // },
                    {
                        name: "销量",
                        type: "pie",
                        // 图形上的标签
                        label: {
                            show: true,
                            color: "red",
                            fontSize: 20,
                            fontWeight: "bold",
                        },
                        center: ["50%", "50%"],
                        radius: ["0%", "70%"],
                        data: [
                            {
                                value: 5,
                                // 数据名称，可以作为饼图的标签
                                name: "衬衫",
                            },
                            {
                                value: 20,
                                name: "羊毛衫",
                            },
                            {
                                value: 36,
                                name: "雪纺衫",
                            },
                            {
                                value: 10,
                                name: "裤子",
                            },
                            {
                                value: 10,
                                name: "高跟鞋",
                            },
                            {
                                value: 20,
                                name: "袜子",
                            },
                        ],
                    },
                ],
            };
            myChart.setOption(option);
        </script>
    </body>
</html>
